<template>
  <div class="min-h-full c-gray-7 bg-contain bg-no-repeat"
    :style="`background-image:url(${getOSSURL('/imgs/h5-others/个人中心图标/背景图.png?a=1')});`">

    <div class="p-6 flex items-center relative">
      <div class="w-15 h-15 rounded-full bg-dark-50 overflow-hidden border-2">
        <img class="w-full h-full" :src="saleInfo?.avatar" />
      </div>
      <div class="ml-2 p-1 grow h-full flex flex-col justify-between">
        <div class="flex items-center justify-between text-light-50 text-base font-bold">
          <span>{{ saleInfo?.nickname }}</span>
        </div>
        <div class="flex gap-2">
          <div class="text-light-50 text-xs border-light-50 border-1 py-0.5 px-2 rounded-xl">默认分组</div>
          <div class="text-light-50 text-xs border-light-50 border-1 py-0.5 px-2 rounded-xl">普通推广员</div>
        </div>
      </div>
    </div>

    <div class="px-3 mt-2 mb-4 w-full">
      <nut-grid :column-num="3" class="bg-white rd-3" :border="false"
        :style="{ '--nut-grid-item-content-bg-color': 'transparent' }">
        <nut-grid-item text="报名推广" to="/poster/mall">
          <img class="w-12" :src="getOSSURL('/imgs/h5-others/个人中心图标/组 13.png')" alt="" />
        </nut-grid-item>
        <nut-grid-item text="课程推广" to="/poster/course">
          <img class="w-12" :src="getOSSURL('/imgs/h5-others/个人中心图标/组 14.png')" alt="" />
        </nut-grid-item>
        <nut-grid-item text="推广奖励" to="/achievement">
          <img class="w-12" :src="getOSSURL('/imgs/h5-others/个人中心图标/组 6.png')" alt="" />
        </nut-grid-item>
      </nut-grid>
    </div>

    <div v-if="!isMiniProgram()" class="px-3 my-4" @click="router.push('/member-advertising')">
      <img class="w-full" :src="getOSSURL('/imgs/h5-others/个人中心图标/banner.png')" alt="" />
    </div>

    <nut-cell-group class="px-3" style="--nut-cell-color: #333">
      <nut-cell title="我的订单" class="items-center py-4" to="/order">
        <template #icon>
          <img class="mr-2 w-5.5" :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_order.png')" />
        </template>
        <template #link>
          <img :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_youjiantou.png')" />
        </template>
      </nut-cell>
      <nut-cell title="招生线索" class="items-center py-4" to="/clue">
        <template #icon>
          <img class="mr-2 w-5.5" :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_clue.png')" />
        </template>
        <template #link>
          <img :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_youjiantou.png')" />
        </template>
      </nut-cell>
      <nut-cell title="历史线索" class="items-center py-4" to="/history-clue">
        <template #icon>
          <img class="mr-2 w-5.5" :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_history.png')" />
        </template>
        <template #link>
          <img :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_youjiantou.png')" />
        </template>
      </nut-cell>
      <nut-cell title="投诉建议" class="items-center py-4" is-link to="/contact">
        <template #icon>
          <img class="mr-2 w-5.5" :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_complaint.png')" />
        </template>
        <template #link>
          <img :src="getOSSURL('/imgs/h5-others/个人中心图标/icon_youjiantou.png')" />
        </template>
      </nut-cell>
    </nut-cell-group>
  </div>
</template>

<script setup lang="ts">
import { isMiniProgram } from "@/utils/mini-program";
import { useUserStore } from "@/store/modules/user";
import { useRouter } from "vue-router";
import * as promotionApi from "@/api/train/promotion";
import { getOSSURL } from "@/utils/utils";
import { showToast } from "@nutui/nutui";
import "@nutui/nutui/dist/packages/toast/style";

const router = useRouter();
const userInfo = useUserStore().userInfo;
// 销售员业绩数据
const saleData = ref<ListPerformanceResult>({
  totalInvite: 0,
  totalReward: 0,
});
const saleInfo = ref<UserInfo | null>(userInfo);

// 获取业绩统计
const getsaleAchieve = async () => {
  let res = await promotionApi.performanceList();
  saleData.value = res.data;
};

// 页面跳转
const toPage = (url: string) => router.push(url);

const handleClear = () => {
  localStorage.clear();
  showToast.text("清除成功");
};

onActivated(async () => {
  getsaleAchieve();
});
</script>
